<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/site.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="scripts/script.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<title>Shopping Cart</title>
<style>
th {
	width: 100px;
}
</style>
<script type="text/javascript">
function getInfo(num, cost, planeID, classType, firstClass, business, economy, flightID)
{
	var seats = $("#flight"+num).val();
    var url = $("#checkSeats").val();
    var errorBox = $('#error_box'+num);
    
	var numFlight = ${fn:length(shoppingCart)};
$.post(url, {
			planeID : planeID,
			firstClass : firstClass,
			business : business,
			economy : economy,
			classType : classType,
			seats : seats,
			flightID : flightID
		}, function(data, status) {
			if(data=="notAdded"){
				$("#errors").val("true");
				errorBox.text("Not enough seats available");
				errorBox.removeClass("error").addClass("error_show");
			} else {
				$("#errors").val("false");
				errorBox.removeClass("error_show").addClass("error");
				$('#cost'+num).html('$' + cost*seats);
			}
		});
		
	var i;
	var sum = 0;
	for (i = 0; i < numFlight; i++) {
		var temp;
		if(i==num){
			temp = seats * cost;
		} else {
			temp = $('#cost'+i).html();
			temp = temp.substring(1);
			temp = Number(temp);
		}
    	sum += temp;
	}
	$('#totalCost').html('Total cost: $' + sum);
  }
</script>

<script type="text/javascript">
function removeFromCart(flightID, num)
{
  var url = "RemoveFromCart";
  $.post(url, {
		flightID : flightID
	}, function(data, status) {
		if(data=="removed"){
			var elem = $("#row"+num);
		    elem.remove();
		} 
	});
  
	var i;
	var sum = 0;
	var numFlight = ${fn:length(shoppingCart)};
	for (i = 0; i < numFlight; i++) {
		var temp;
		if(i!=num){
			temp = $('#cost'+i).html();
			temp = temp.substring(1);
			temp = Number(temp);
			sum += temp;
		}
	}
	$('#totalCost').html('Total cost: $' + sum);
  
  }
</script>
</head>
<body>
	<div><%@include file="/WEB-INF/header.jsp"%></div>
	<div class="content-wrapper">
		<div id="body" style="background:;">
			<h1>Shopping Cart</h1>
			<br> <b>Flights Added</b> <br>
			<br>
			<section>
				<table>
					<thead>
						<tr>
							<th>Departure</th>
							<th>Arrival</th>
							<th>Duration</th>
							<th>Airline</th>
							<th>Seats</th>
							<th>Price</th>
							<th>Total Flight Price</th>
						</tr>
					</thead>
					<tbody>
					<c:set var="sum" value="${0}"/>
					<c:set var="num" value="${0}"/>  
						<c:forEach items="${sessionScope.shoppingCart}" var="flight">
							<tr id="row${num}">
								<td><fmt:formatDate value="${flight.departure}"
										pattern="hh:mm a" /></td>
								<td><fmt:formatDate value="${flight.arrival}"
										pattern="hh:mm a" /></td>
								<td><c:out value="${flight.timeDifference}"/></td>
								<td><c:out value="${flight.operator}"/></td>
								<td><input type="number" class="seatNum" id="flight${num}" 
								onchange="getInfo(${num}, ${flight.cost}, ${flight.planeId}, 
								'${flight.selectedClass}', ${flight.firstClass}, ${flight.business}, 
								${flight.economy}, ${flight.id})" value="${flight.seats}" name="seats"
									min="1" max="100" /></td>
								<td>$<c:out value="${flight.cost}"/></td>
								<td id="cost${num}">$<c:out value="${flight.seats * flight.cost}"/></td>
								<td><button class="button" type="button" onclick="removeFromCart(${flight.id}, ${num})">Delete</button></td>
								<c:set var="sum" value="${sum + flight.seats * flight.cost}"/>
							</tr>
							<tr id="error_box${num}"></tr>
						<c:set var="num" value="${num + 1}"/>  
						</c:forEach>
					</tbody>
				</table>
				<br>
				<div id=totalCost>Total cost: $<c:out value="${pageScope.sum}"/></div>
			</section>
			<div style="margin: 5px">
			<c:url value="ViewAndBook" var="encodedURL"></c:url> 
			<form name="Check Out" method="post" action="${encodedURL}">
				<input type="submit" name="CheckOut" value="Check Out" class="button">
				<input type="hidden" name="errors" id="errors" value="false">
				<c:url value="CheckSeats" var="encodedURLSeats"></c:url> 
				<input type="hidden" name="checkSeats" id="checkSeats" value="${encodedURLSeats}">
			</form>
			</div>
			
			<div style="margin: 5px">
				<c:url value="FlightSearchQuery.jsp" var="encodedURLSearch"></c:url> 
				<a href="${encodedURLSearch}" class="button" style="border: 2px outset #E0E0E0;">Continue Shopping</a>
			</div>
		</div>
	</div>
</body>
</html>